<template>
    <div>
        <div class="banner"></div>
        <div class="content">
            <div class="layout">
                <div class="toolbar">
                    <div class="search">
                        <el-input placeholder="请输入资源名称" class="no-radius input" size="large" v-model="key"></el-input>
                        <el-button type="primary" class="no-radius" size="large" @click="search">搜索</el-button>
                    </div>
                    <div class="list clearfix">
                        <div @click="search">
                            <el-image
                                class="img"
                                :src="navList[0]"
                                fit="scale-down">
                            </el-image>
                            <span>资源申请</span>
                        </div>
                        <div @click="$router.push('/manager/res-list')">
                            <el-image
                                class="img"
                                :src="navList[1]"
                                fit="scale-down">
                            </el-image>
                            <span>资源管理</span>
                        </div>
                        <div @click="downLoad">
                            <el-image
                                class="img" style="width: 53px;"
                                :src="navList[2]"
                                fit="scale-down">
                            </el-image>
                            <span>资源列表下载</span>
                        </div>
                        <div @click="$router.push('/manager/authorization')" v-if="$routeNav.getAuth('wdzy')">
                            <el-image
                                class="img"
                                :src="navList[3]"
                                fit="scale-down">
                            </el-image>
                            <span>我的资源</span>
                        </div>
                    </div>
                </div>
                <div class="new-list">
                    <div class="head-line">新资源上线</div>
                    <el-row class="res-list" v-for="(list,index) in tableData" :key="index">
                        <el-col :span="18" class="info">
                            <div class="title">
                                <span class="name ellipsis" @click="$router.push('/res/detail/'+list.id)">{{list.resName}}</span>
                                <el-button class="minor limit ml10 text" size="mini" v-if="list.collectionSituation!=2">
                                    {{list.resType==1?'服务接口类':(list.resType==2?'服务页面类':'数据交换类')}}
                                </el-button>
                                <el-button class="minor limit ml10 text" size="mini" v-else>
                                    未归集
                                </el-button>
                            </div>
                            <div class="mt20">
                                <span class="mr20">{{list.resPower==1?'公开':'受限'}}</span>
                                <span class="mr20">{{list.resSourceDept}}</span>
                                <span>更新时间：{{list.modifyTime}}</span>
                            </div>
                        </el-col>
                        <el-col :span="6" class="text-right">
                            <el-button size="small" @click="addCart(list)"
                                       v-if="list.collectionSituation==1 && $routeNav.getAuth('power-addCart')">加入申请栏
                            </el-button>
                            <el-button type="primary" size="small"
                                       @click="submit(list,list.collectionSituation==2) && $routeNav.getAuth('power-zysq')">
                                立即申请
                            </el-button>
                        </el-col>
                    </el-row>
                    <div class="text-center empty" v-if="!tableData||!tableData[0]">暂无数据</div>
                    <div v-if="tableData&&tableData[0]" class="more">
                        <span @click="$router.push('/res/list')">查看更多</span>
                    </div>
                </div>
                <el-row class="res-rank mt20">
                    <el-col :span="11" class="down">
                        <div class="title">资源申请排行榜</div>
                        <table-example :data="downRank" :tableColumn="downRankHeader"
                                       :slotColumns="downRankSlotColumns">
                            <template slot="rankNumber" slot-scope="scope">
                                <span>{{scope.$index+1}}</span>
                            </template>
                        </table-example>
                    </el-col>
                    <el-col :span="11" :offset="2" class="provide">
                        <div class="title">资源提供排行榜</div>
                        <table-example :data="provideRank" :tableColumn="provideRankHeader"
                                       :slotColumns="provideRankSlotColumns">
                            <template slot="rankNumber" slot-scope="scope">
                                <span>{{scope.$index+1}}</span>
                            </template>
                        </table-example>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import tableExample from '../../components/table'
    import nav1 from '../../../static/images/home-nav1.png'
    import nav2 from '../../../static/images/home-nav2.png'
    import nav3 from '../../../static/images/home-nav3.png'
    import nav4 from '../../../static/images/home-nav4.png'

    export default {
        data() {
            return {
                tableData: [],
                index: 1,
                downRank: [],
                downRankHeader: [
                    {
                        prop: 'rankNumber',
                        label: '排名',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'resName',
                        label: '资源名称',
                        minWidth: '50%',
                        align: 'center'
                    },
                    {
                        prop: 'downloadNumber',
                        label: '申请量',
                        minWidth: '30%',
                        align: 'center'
                    }
                ],
                downRankSlotColumns: ['rankNumber'],
                provideRank: [],
                provideRankHeader: [
                    {
                        prop: 'rankNumber',
                        label: '排名',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'provider',
                        label: '提供部门',
                        minWidth: '50%',
                        align: 'center'
                    },
                    {
                        prop: 'provideNumber',
                        label: '提供量',
                        minWidth: '30%',
                        align: 'center'
                    }
                ],
                provideRankSlotColumns: ['rankNumber'],
                key: '',
                navList: [nav1, nav2, nav3, nav4]
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            downLoad() {
                let api = window.localStorage.getItem('ajaxApi') || '/_api'
                window.open(location.origin + api + '/rdResourceDirData/downLoadResItem', '_blank')
            },
            getList(index) {
                if (index) this.index = index
                this.$http.get('/rdResourceDir/getIndexPage').then(result => {
                    if (result.success) {
                        this.tableData = result.data.newRdResourceDirs && result.data.newRdResourceDirs.rdResourceDir
                        this.downRank = result.data.downloadRank && result.data.downloadRank.applyRankVO
                        this.provideRank = result.data.provideRank && result.data.provideRank.provideVO
                    }
                })
            },
            addCart(item) {
                this.$http.post('/rdResourceApplicationDetail/createNewApply', {
                    resId: item.id,
                    resName: item.resName,
                    resType: item.resType,
                    resSituation: 1 // 1 已归集 2 未归集
                }).then(result => {
                    if (result.success) {
                        this.$message.success({
                            message: result.data,
                            showClose: true
                        })
                    }
                })
            },
            submit(list, offLine) {
                this.$router.push({path: '/res/submit', query: {idList: list.id, offLine: offLine}})
            },
            search() {
                this.$router.push({path: '/res/list', query: {key: this.key}})
            }
        },
        components: {
            tableExample
        }
    }
</script>

<style scoped lang="less">
    .main {
        background-color: #eff2f5;
    }

    .banner {
        height: 430px;
        margin-top: -20px;
        background: #000 url('../../../static/images/banner.png') no-repeat center;
        background-size: auto 100%;
    }

    .toolbar {
        display: block;
        margin-top: -136px;
        margin-bottom: 30px;

        .search {
            .input {
                width: 600px;
            }
        }

        .list {
            margin-top: 40px;

            > div {
                float: left;
                width: 280px;
                height: 100px;
                line-height: 100px;
                margin-left: 16px;
                background-color: #fff;
                text-align: center;
                cursor: pointer;

                > * {
                    display: inline-block;
                    vertical-align: top;
                    font-size: 18px;
                    height: 100%;
                }

                .img {
                    margin-right: 20px;
                    width: 55px;
                }

                &:first-child {
                    margin-left: 0;
                }
            }
        }

        > div {
            > * {
                margin-bottom: 0;
            }
        }
    }

    .new-list {
        .res-list {
            border: 0 none;
            padding: 30px;
            margin-bottom: 10px;
            background-color: #fff;
        }

        .empty {
            padding: 30px 0;
        }

        .more {
            text-align: center;
            margin: 20px 0 50px;

            span {
                color: #fff;
                width: 130px;
                height: 36px;
                line-height: 36px;
                font-size: 16px;
                display: inline-block;
                text-indent: 20px;
                text-align: left;
                background: url('../../../static/images/jump.png') no-repeat center;
                cursor: pointer;
            }
        }
    }

    .res-rank {
        display: flex;

        .down, .provide {
            padding: 10px 30px 30px 30px;
            background-color: #fff;

            .title {
                color: #fff;
                width: 169px;
                height: 40px;
                line-height: 40px;
                margin: 0 auto;
                text-align: center;
                position: relative;
                top: -30px;
            }
        }

        .down {
            .title {
                background: url('../../../static/images/download.png') no-repeat center;
            }
        }

        .provide {
            .title {
                background: url('../../../static/images/provider.png') no-repeat center;
            }
        }
    }
</style>
